<template>
    <div class="app-container">
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold">基础信息</span>
            </div>
            <div>
                <el-form
                    ref="form"
                    :model="form"
                    :rules="rules"
                    label-width="110px"
                    size="small"
                >
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-form-item label="业务类型" prop="bizType">
                                <el-select
                                    style="width: 260px"
                                    v-model="form.bizType"
                                    placeholder="请选择业务类型"
                                    @change="changeBizType"
                                >
                                    <el-option
                                        v-for="dict in dict.type.bus_flow_type"
                                        :label="dict.label"
                                        :value="parseInt(dict.value)"
                                        :key="dict.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="表单类型" prop="formType">
                                <el-select
                                    style="width: 260px"
                                    v-model="form.formType"
                                    placeholder="请选择表单类型"
                                >
                                    <el-option label="业务" :value="1" />
                                    <el-option label="审批" :value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <template v-if="form.formType == 1">
                            <el-col :span="8">
                                <el-form-item label="选择表单" prop="busFormId">
                                    <el-select
                                        style="width: 260px"
                                        v-model="form.busFormId"
                                        placeholder="请选择表单类型"
                                        @change="changeBusFormName"
                                        clearable
                                    >
                                        <el-option
                                            v-for="(item, index) in formList"
                                            :key="item.id"
                                            :label="item.busFormName"
                                            :value="item.id"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="前置调用方法">
                                    <el-input
                                        style="width: 260px"
                                        v-model="form.beforeCallingMethod"
                                        placeholder="请输入前置调用方法"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="后置调用方法">
                                    <el-input
                                        style="width: 260px"
                                        v-model="form.afterCallingMethod"
                                        placeholder="请输入后置调用方法"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </template>

                        <template v-else-if="form.formType == 2">
                            <el-col :span="8">
                                <el-form-item label="表单名称" prop="formName">
                                    <el-input
                                        style="width: 260px"
                                        v-model="form.formName"
                                        placeholder="请输入名单名称"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="前置调用方法">
                                    <el-input
                                        style="width: 260px"
                                        v-model="form.beforeCallingMethod"
                                        placeholder="请输入前置调用方法"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="后置调用方法">
                                    <el-input
                                        style="width: 260px"
                                        v-model="form.afterCallingMethod"
                                        placeholder="请输入后置调用方法"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-row>
                </el-form>
            </div>
        </el-card>
        <el-card
            v-if="form.formType == 2"
            class="box-card"
            style="margin-top: 20px"
            shadow="never"
        >
            <div slot="header" class="clearfix">
                <span style="font-weight: bold">表单信息</span>
            </div>
            <div>
                <formBuilder
                    :jsonStr="form.customForm"
                    @getJsonInfo="saveJson"
                ></formBuilder>
            </div>
        </el-card>
<!--        <el-card-->
<!--            v-else-->
<!--            class="box-card"-->
<!--            style="margin-top: 20px"-->
<!--            shadow="never"-->
<!--        >-->
<!--            <div slot="header" class="clearfix">-->
<!--                <span style="font-weight: bold">{{ form.busFormName }}</span>-->
<!--            </div>-->
<!--            <div>-->
<!--                <keep-alive>-->
<!--                    <component v-bind:is="detailComponent"></component>-->
<!--                </keep-alive>-->
<!--                <div class="flex-row-end">-->
<!--                    <el-button @click="back">取消</el-button>-->
<!--                    <el-button type="primary" @click="saveForm">确定</el-button>-->
<!--                </div>-->
<!--            </div>-->
<!--        </el-card>-->

        <div class="card-wrap flex justify-end card-padding" v-else-if="form.formType == 1">
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="saveForm">确定</el-button>
        </div>
    </div>
</template>

<script>
import formBuilder from "../components/formBuilder/index.vue";
import {
    detail,
    add,
    busFormConfig,
    update,
} from "@/api/formConfig/formDefinition";
import JBTest from "@/views/formConfig/components/test/test.vue";

export default {
    // name: 'FormDefinitionAdd',
    components: {
        formBuilder,
        JBTest,
    },
    dicts: ["bus_flow_type"],
    props: {},
    data() {
        // 这里存放数据
        return {
            form: {
                formType: null,
                formName: null,
                busFormId: null,
                busFormName: null,
                bizType: null,
                customForm: [],
                pageAddress: null,
                id: null,
                beforeCallingMethod: null,
                afterCallingMethod: null,
                sort:null,
            },
            formList: [],
            rules: {
                bizType: [
                    {
                        required: true,
                        message: "请选择业务类型",
                        trigger: "change",
                    },
                ],
                formType: [
                    {
                        required: true,
                        message: "请选择表单类型",
                        trigger: "change",
                    },
                ],
                busFormId: [
                    {
                        required: true,
                        message: "请选择表单",
                        trigger: "change",
                    },
                ],
                formName: [
                    {
                        required: true,
                        message: "请输入表单名称",
                        trigger: "change",
                    },
                ],
                sort: [
                    {
                        required: true,
                        message: "请输入表单顺序",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    computed: {
        detailComponent() {
            const active = this.form.pageAddress;
            if (active) {
                return "JBTest";
            } else {
                return null;
            }
        },
    },
    // 方法集合
    methods: {
        getDetail() {
            detail(this.$route.query.id).then((res) => {
                this.form = res.data;
                if (this.form.formType == 1) {
                    this.form.customForm = null;
                }
                this.getFormList();
            });
        },

        getFormList() {
            busFormConfig(this.form.bizType).then((res) => {
                this.formList = res.data;
            });
        },
        changeBizType() {
            this.getFormList();
        },
        changeBusFormName(val) {
            const obj = this.formList.find((item) => {
                return item.id == val;
            });
            this.form.busFormId = obj.id;
            this.form.busFormName = obj.busFormName;
            this.form.pageAddress = obj.pageAddress;
            this.form.formName = obj.busFormName;
        },
        saveJson(jsonStr) {
            if (this.form.formType == 2 && (jsonStr == null || jsonStr == "")) {
                this.$message.error("自定义表单内容不能为空");
                return;
            }
            this.form.customForm = jsonStr;
            console.log('自定义表单json----', this.form.customForm)
            this.saveForm();
        },

        saveForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.formType == 1) {
                        this.form.customForm = null;
                    }
                    if (this.$route.query.id) {
                        update(this.form).then((res) => {
                            this.$message.success("编辑成功");
                            this.$router.back();
                        });
                    } else {
                        add(this.form).then((res) => {
                            this.$message.success("新增成功");
                            this.$router.back();
                        });
                    }
                }
            });
        },
        back() {
            this.$router.back();
        },
    },
    mounted() {
        if (this.$route.query.id) {
            this.getDetail();
        }
    },
};
</script>

<style lang="scss" scoped></style>
